<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 面板 -->
        <el-card class="box-card" style="margin-top:20px">
            <div class="grid-content bg-purple-light" style="margin:20px">
                <el-button type="primary" @click="showAddCate">添加分类</el-button>
            </div>
            <!-- 表格 -->
            <tree-table class="treeTable"
            :data='categoriesList'
            :columns='columns'
            :selection-type='false'
            :expand-type='false'
            show-index index-text='#'
            border
            :show-row-hover='false'>
                <template slot="isok" slot-scope='scope'>
                    <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:lightgreen"></i>
                    <i class="el-icon-error" v-else style="color:red"></i>
                </template>
                <template slot="sort" slot-scope='scope'>
                    <el-tag v-if="scope.row.cat_level == 0">{{scope.row.cat_level}}</el-tag>
                    <el-tag v-if="scope.row.cat_level == 1" type='success'>{{scope.row.cat_level}}</el-tag>
                    <el-tag v-if="scope.row.cat_level == 2" type='danger'>{{scope.row.cat_level}}</el-tag>
                </template>
                <template slot="controll">
                    <el-button type="primary" icon="el-icon-edit" >编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete">删除</el-button>
                </template>
            </tree-table>
            <!-- 分页 -->
            <div class="block" style="margin-top:20px">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryinfo.pagenum"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="queryinfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </el-card>
        <!-- 添加分类的对话框 -->
        <el-dialog
            title="添加分类"
            :visible.sync="adddialogVisible"
            width="30%">
            <el-form :rules="cateRules" :model="cateList" label-width="80px">
                <el-form-item label="分类名称" prop='cat_name'>
                    <el-input v-model="cateList.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级目录">
                    <!-- 级联选择器 -->
                    <el-cascader
                        v-model="cateSelected"
                        :options="fatherList"
                        :props="cateCascader"
                        expand-trigger='hover'
                        @change="addCateChange"
                        change-on-select
                        clearable></el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="adddialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCate">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            queryinfo:{type:3,pagenum:1,pagesize:5},
            total:0,
            categoriesList:[],
            columns:[
                {
                    label:'分类名称',
                    prop:'cat_name'
                },
                {
                    label:'是否有效',
                    prop:'cat_deleted',
                    type:'template',
                    template:'isok'
                },
                {
                    label:'排序',
                    prop:'cat_level',
                    type:'template',
                    template:'sort'
                },
                {
                    label:'操作',
                    type:'template',
                    template:'controll'
                }
            ],
            adddialogVisible:false,
            cateList:{
                cat_name:'',
                cat_pid:0,
                cat_level:0
            },
            cateRules:{
                cat_name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ]
            },
            fatherList:[],
            cateCascader:{
                value:'cat_id',// 定位Id
                label:'cat_name',
                children:'children'
            },
            cateSelected:''
        }
    },
    created() {
        this.getCate()
    },
    methods:{
        async getCate() {
            // 渲染页面
            let {data : res} = await this.$http.get('categories',{params:this.queryinfo})
            // console.log(res)
            if(res.meta.status != 200) return this.$http.error(res.meta.msg)
            this.categoriesList = res.data.result
            this.total = res.data.total
        },
        handleSizeChange(newPagesize) {
            // console.log(newPagesize)
            this.queryinfo.pagesize = newPagesize
            this.getCate()
        },
        handleCurrentChange(newPagenum) {
            // console.log(newPagenum)
            this.queryinfo.pagenum = newPagenum
            this.getCate()
        },
        showAddCate() {
            this.adddialogVisible = true
            this.getFatherList()
        },
        async getFatherList() {
            let {data : res} = await this.$http.get('categories',{params : { type : 2 } })
            if(res.meta.status != 200) return this.$message.error(res.meta.msg)
            this.fatherList = res.data
        },
        addCateChange(ids) {
            // 选中一级 二级分类触发
            console.log(ids)
            this.cateSelected = ids
        },
        async addCate() {
            if(this.cateSelected.length > 0) {
                this.cateList.cat_pid = this.cateSelected[this.cateSelected.length - 1]
                this.cateList.cat_level = this.cateSelected.length
            } else {
                this.cateList.cat_pid = 0
                this.cateList.cat_level = 0
            }
            let {data : res} = await this.$http.post('categories',this.cateList)
                if(res.meta.status != 201) return this.$message.error(res.meta.msg)
                this.getCate()
            this.adddialogVisible = false
        }
    }
}
</script>

<style lang="less" scoped>
   
</style>

